<template>
  <div>
      <div class="group-item">

        <div class="group-item-chart" :id="'charts'+index"></div>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    chartdata: {
      type: Array,
      default () {
        return []
      }
    },
    chartdataceshi: {
      type: Array,
      default () {
        return []
      }
    },
    chartdatax: {
      type: Array,
      default () {
        return []
      }
    },
    legend: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart () {
      // 获取坐标轴刻度最大值
      let maxVal = (Number(Math.max(...this.chartdata)) + 1)
      let maxVal1 = null
      if (this.index > 2) {
        maxVal1 = (Number(Math.max(...this.chartdataceshi)) + 1)
      }
      // 获取坐标轴刻度最小值
      const minVal = 0
      // 计算坐标轴分割间隔
      let interval = (maxVal - minVal) / 5
      let interval1 = null
      if (this.index > 2) {
        interval1 = (maxVal1 - minVal) / 5
      }
      let echarts = null
      let ids = 'charts' + String(this.index)
      echarts = this.$echarts.init(document.getElementById(ids))
      let option = {
        // legend: {
        //   data: this.index > 2 ? this.legend : [],
        //   top: '2%'
        // },
        xAxis: {
          type: 'category',
          data: this.chartdatax,
          splitLine: {
            show: false, // 纵向分割线显示
            lineStyle: { // 纵向分割线样式设置
              color: 'rgba(242,237,207,1)' // 如果值是一个数组的话 就可以给每条线设置不同样式
            }
          },
          boundaryGap: true,
          splitArea: { show: false }, // 纵向背景区域
          axisTick: { show: true }, // 除去x轴的刻度
          axisLine: {
            lineStyle: { color: '#ccc', width: 1, height: 1 } // x轴
          },
          axisLabel: { // 控制x轴文本
            show: true,
            textStyle: { color: '#ccc', fontSize: 12 }
          }
        },
        yAxis: this.index > 2 ? [
          {
            type: 'value',
            // name: this.legend[1],
            min: 0, // 坐标轴刻度最小值。
            // max: maxVal1, // 坐标轴刻度最大值。
            scale: true,
            offset: -12,
            nameGap: 18,
            alignTicks: false,
            // axisLabel: {
            //   formatter: '{value}',
            //   rotate: 0,
            //   margin: 14
            // },
            // interval: interval1, // 强制设置坐标轴分割间隔。
            splitLine: { show: false },
            axisLine: {
              lineStyle: { color: '#ccc', width: 2, height: 1 } // y轴
            }
          }
          // {
          //   type: 'value',
          //   name: this.legend[0],
          //   min: 0, // 坐标轴刻度最小值。
          //   // max: maxVal, // 坐标轴刻度最大值。
          //   scale: true,
          //   offset: -8,
          //   nameGap: 18,
          //   alignTicks: false,
          //   axisLabel: {
          //     formatter: '{value}',
          //     rotate: 0,
          //     margin: 10
          //   },
          //   // interval: interval, // 强制设置坐标轴分割间隔。
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: { color: '#ccc', width: 2, height: 1 } // y轴
          //   }
          // }
        ] : {
          type: 'value',
          offset: 0,
          scale: true,
          min: 0, // 坐标轴刻度最小值。
          max: this.index == '0' ? 3 : maxVal, // 坐标轴刻度最大值。
          splitNumber: 5, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
          interval: this.index == '0' ? 1 : null, // 强制设置坐标轴分割间隔。
          splitLine: { show: false },
          axisLine: {
            lineStyle: { color: '#ccc', width: 2, height: 1 } // y轴
          }
        },
        color: [
          // {
          //   type: 'linear',
          //   x: 0,
          //   y: 0,
          //   x2: 0,
          //   y2: 1,
          //   colorStops: [{
          //     offset: 0, color: '#00DEA1' // 0% 处的颜色
          //   }, {
          //     offset: 1, color: '#00DEA1' // 100% 处的颜色
          //   }],
          //   global: false // 缺省为 false
          // },
          {
            type: 'bar',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#1498FF' // 0% 处的颜色
            }, {
              offset: 1, color: '#2DC9FF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
        grid: {
          x: 40,
          y: 30,
          x2: 40,
          y2: 40,
          containLabel: false
        },
        series: this.index > 2 ? [

          // {
          //   lineStyle: { // 折线颜色
          //     normal: {
          //       color: '#00DEA1'
          //     }
          //   },
          //   name: this.legend[0],
          //   type: 'line',
          //   yAxisIndex: 1,
          //   data: this.chartdataceshi
          // },
          {
            name: this.legend[1],
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ''
              }
            },
            barWidth: '60%',
            data: this.chartdata
          }
        ] : [{
          lineStyle: { // 折线颜色
            normal: {
              color: '#00DEA1'
            }
          },
          smooth: this.index != 2 || this.index > 2,
          // symbol: 'circle', //设定为实心点
          symbolSize: 4, // 设置折点的大小
          itemStyle: {
            normal: { // 折点颜色
              label: { // 为true时  设置拐点上方值 格式'{b}:{c}'
                show: false,
                formatter: '{c}'
              },
              color: '#00DEA1',
              width: 3
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          // data: [45, 50, 51, 50, 49, 48, 53],
          data: this.chartdata,
          type: 'line'
        }]
        // grid: { // 设置网格距离canvase外层盒子距离
        //   x: 40,
        //   y: 30,
        //   x2: 40,
        //   y2: 40
        // }
      }
      if (echarts) {
        console.log('====option', option)
        echarts.setOption(option)
      }
    }
  },

  // 然后在mounted里调用该方法就可以了
  mounted () {
    this.initChart()
  }
}
</script>
<style lang="scss" scoped>
.group-item{
  width: 100%;
  height: 215px;
  .group-item-chart{
    width:100%;
    height: 100%;
  }
}
</style>
